<script setup>
defineProps(["expanded"]);
</script>

<template>
  <ul class="drawer" :class="{ expanded: expanded }">
    <h1 class="title-medium">
      <span>网络扫描检测系统</span>
    </h1>
    <slot></slot>
  </ul>
</template>

<style scoped>
.drawer > h1 {
  margin: 12px 32px 24px 32px;
  font-weight: 500;
  font-family: var(--md-ref-typeface-brand);
  display: grid;
  grid-template-rows: 0fr;
  white-space: nowrap;
  opacity: 0;
  transition-property: grid-template-rows, opacity;
  transition-duration: var(--md-sys-motion-duration-long4);
  transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
}

.drawer.expanded > h1 {
  opacity: 1;
  grid-template-rows: 1fr;
}

.drawer > h1 > span {
  min-height: 0;
}

.drawer {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
